import { defineStore } from 'pinia'

export default defineStore('theme', {
  state: () => {
    return {
      colorPrimary: '#3758f1',
      appSize: 'middle',
      tableSize: 8, // 大: 12, 中: 8, 小: 6
      formSize: 12, //大: 18, 中: 12, 小: 10
      fontSize: 14, //大: 18, 中: 14, 小: 12
      isDark: false
    }
  },
  actions: {
    changeTheme(colors) {
      this.colorPrimary = colors.colorPrimary
      this.setVarColor(colors)
    },
    setVarColor(colors) {
      //设置主题色
      document.documentElement.style.setProperty('--primary-color', colors.colorPrimary)
      //设置二级主题色
      document.documentElement.style.setProperty('--secondary-color', colors.colorPrimaryBg)
      //设置三级级主题色
      document.documentElement.style.setProperty('--heavy-color', colors.colorPrimaryBgHover)
      //设置背景色
      document.documentElement.style.setProperty('--bg-color', colors.colorBgContainer)
      // //设置浅色
      document.documentElement.style.setProperty('--thin-color', colors.colorBgLayout)
      //设置边框色
      document.documentElement.style.setProperty('--border-heavy-color', colors.colorBorder)
      //设置边框色-浅
      document.documentElement.style.setProperty('--border-color', colors.colorBorder)
      //设置字体色
      document.documentElement.style.setProperty('--text-color', colors.colorText)
      //设置失效背景色
      document.documentElement.style.setProperty('--disabled-bg-color', colors.colorBgContainerDisabled)
      //设置失效文字色
      document.documentElement.style.setProperty('--disabled-text-color', colors.colorTextDisabled)
      //设置hover色
      document.documentElement.style.setProperty('--hover-color', colors.colorFillTertiary)
    }
  },
  persist: true
})
